<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 内容 -->
    <div class="user_Recharge_box clearfix">
      <div class="user_Recharge_Withdrawals clearfix">
        <h3 class="user_RechaWithd">{{textBalance}}</h3>
        <div class="user_moneynumber dip ju_al_lf">
          <span class="user_moneyfonticon">￥</span>
          <!-- <input type="number" pattern="\d" class="user_money" v-model="moneynumber" :input="getnumbermoney()"> -->
          <input type="number" pattern="\d" class="user_money" v-model="moneynumber" @input="getnumbermoney()">
          <!-- <input type="number" pattern="\d" class="user_money" v-model="moneynumber" @focus="getnumbermoney()"> -->
        </div>
        <button class="user_btn_add" :class="{'user_bnt_actvei':this.userMoneyActive}" :disabled="this.dipsd" @click="getmoneyRecharg()" v-if="this.Url == 1">下一步</button>
        <button class="user_btn_add" :class="{'user_bnt_actvei':this.userMoneyActive}" :disabled="this.dipsd" @click="getmoneyWihdt()" v-if="this.Url == 2">下一步</button>
        <section class="user_Withd_box" v-if="ifisblickWithd">
          <p class="user_Withd_Prompt">由于您使用的是微信端,本次提现将会提现到该微信账户.</p>
          <div class="dip ju_al user_Withd_Agre">
              <input type="radio" class="input_ardio" :class="{'addchecked':addcheckedS}" @click="checkedGETA()" :checked="addcheckedS">
              <label for="test1">
                <span @click="herfAgre()" v-if="addcheckedS" class="user_herfAgre">《 易点达交易协议 》</span>
                <span v-else >《 易点达交易协议 》</span>
              </label>  
          </div>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
import bus from '../../assets/bus/js/bus.js'
export default {
  data(){
    return{
      urls:{
        url:'',
        text:'',
      },
      Url:'',//判断方式
      textBalance:'', //显示title
      moneynumber:'' ,//显示金额
      userMoneyActive:false, //点击样式
      ifisblickWithd:false, //显示提现
      addcheckedS:false, //协议
      OPIND:'',
      dipsd:true,
    }
  }
  ,methods:{
    URlText(){
      this.OPIND = sessionStorage.getItem('openId')
      // console.log(sessionStorage.getItem('moneyUSer'))
      this.moneynumber = sessionStorage.getItem('moneyUSer') != null ? sessionStorage.getItem('moneyUSer') : '';
      this.getnumbermoney()      
      this.Url = this.$route.params.balance;
      if(this.Url == 1){
        this.urls.text = '充值'
        this.textBalance = '充值金额'
        this.ifisblickWithd  =false  //显示提现的说明
      }else if(this.Url = 2){
        this.urls.text = '提现'
        this.textBalance = '提现金额'  
        this.ifisblickWithd  = true          
      }
    },
    checkedGETA(){ //点击是否阅读协议
      this.addcheckedS = !this.addcheckedS
    },
    herfAgre(){ //查看协议  
      // this.$router.push({
      //   path:'/'
      // })
    },
    getnumbermoney(){
      if(bus.amount().test(this.moneynumber) || this.moneynumber != ''){
        this.userMoneyActive = true 
        this.dipsd = false
      }else{
        this.userMoneyActive = false
        this.dipsd = true
        this.moneynumber = ''
      }
    },
    getWinhdeLIST(){ //判断有没有点击确认提现
      if(!this.addcheckedS){
         alert('请认真读看《易点达交易协议》')
      }else{
        //ajax
        console.log(2222)
      }
    },
    onBridgeReady(resf){
      var _this = this
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',{
					"appId":resf.data.unifiedOrd.appId,     //公众号名称，由商户传入     
					"timeStamp":resf.data.unifiedOrd.timeStamp,     ////       //时间戳，自1970年以来的秒数    
					"nonceStr":resf.data.unifiedOrd.nonceStr, //随机串     
					"package":resf.data.unifiedOrd.package,     
					"signType":"MD5",      ///    //微信签名方式：     
					"paySign":resf.data.unifiedOrd.sign //微信签名 
				},
				// console.log(gf)
				function(res){     
					if(res.err_msg == "get_brand_wcpay_request:ok" ) {
            _this.$router.push({
              path:'/bomNav/userbalance'
            })
					} // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
				}
			); 
    },
    onBridgeReadySS(){
      this.axios.post(this.$busPoat.recharge(),{
        "rechargeAmount":this.moneynumber,
	      "openid":this.OPIND
      }).then(resf =>{
          if(resf.data.iplancode == 200){
            if(typeof WeixinJSBridge == "undefined"){
              if(document.addEventListener){
                document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
              }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
              }
            }else{
              this.onBridgeReady(resf);
            }
          }else if(resf.data.iplancode == 102){
            alert(resf.data.msg)
            //提示用户
          }
      }).catch(error=>{
        alert('支付失败')
      })
    },
    getmoneyRecharg(){ //充值
      this.userMoneyActive = true 
      this.dipsd = false
      this.onBridgeReadySS()
    },
    getmoneyWihdt(){ //提现
      this.userMoneyActive = true 
      this.dipsd = false
      this.getWinhdeLIST()
    }
  }
  ,components:{Nav} //引入组件
 ,created(){
    this.URlText()
 },
 destroyed() { //离开清楚
   sessionStorage.removeItem('moneyUSer')
  },

//  watch:{
  //  getnumbermoney()
//  },
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  position: fixed;
}
// input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  //   color: #DEDEDE;
  //   font-size: .24rem;
  // } 
  // input:-moz-placeholder, textarea:-moz-placeholder { 
  //   color: #DEDEDE;
  //   font-size: .24rem;
  // } 
  // input::-moz-placeholder, textarea::-moz-placeholder { 
  //   color: #DEDEDE;
  //   font-size: .24rem;
  // } 
  // input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  //   color: #DEDEDE;
  //   font-size: .24rem;
  // } 
.user_Recharge_box{
  margin-top:1rem;
  width: 100%;
  position: relative;
  padding:0rem .2rem;
  .user_Recharge_Withdrawals{
    background: #fff;
    width: 100%;
    // height: 4.33rem;
    padding:0rem .4rem;
    color:#333;    
    font-weight: 600;
    .user_RechaWithd{
      width: 100%;
      height: 0.8rem;
      padding-top:.25rem;
      font-size: .24rem;
      text-align: left;
    }
    .user_moneynumber{
      width: 100%;
      height: 1.35rem;
      border-bottom:.02rem solid #f2f2f2;
      padding-top:.28rem;
      .user_moneyfonticon{
        width: 6%;
        text-align: center;
        line-height: 1.07rem;
        height: 100%;
        font-size:.36rem;
      }
      .user_money{
        border:0;
        width: 94%;
        height: 100%;
        padding-left:2%;
        font-size: .6rem;
        caret-color: #00A9DA;
        outline:none;
        font-family: arial;
        font-weight: 500;
      }
     
    }
    .user_btn_add{
      display: block;
      width: 100%;
      margin:.6rem 0rem;
      height: 1.02rem;
      background: #ff8420;
      color:#ffb070;
      font-size:.3rem;
      text-align: center;
      line-height: 1.02rem;
    }
    .user_bnt_actvei{
      background: #FF7200;
      color:#FFFFFF;
    }
    .user_Withd_box{
      width: 100%;
      margin: 0 auto;
      .user_Withd_Prompt{
        width: 100%;
        text-align: center;
        color:#c1c1c1;
        font-size: .2rem;
      }
      .user_Withd_Agre{
        height: 1.1rem;
        padding:.43rem 0rem;
        width: 100%;
        .user_herfAgre{
          color:#FF7200;          
        }
      }
    }
    
  }
}
.input_ardio{  
  height: 0.33rem;  
  width: 0.33rem; 
  visibility: hidden;  
  position: relative;  
  margin-right:.26rem;
  &:before{  
    top:8%;  
    left:0;
    position: absolute;  
    content:' ';  
    visibility: visible;  
    height: 0.3rem;  
    width: 0.3rem;  
    display: block;  
    background-image: url("../../../static/images/userifon/Withd_none.png");  
    background-size:100%; 
    background-repeat:no-repeat; 
  }   
  &:checked:before{  
    background-image: url("../../../static/images/userifon/Withd_agre.png");  
    background-size:100%; 
    background-repeat:no-repeat; 
  } 
}

</style>
